<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card" style="background-color:#c9b6e8">
          <div slot="header" class="clearfix">
            <span>用户总数</span>
          </div>
          <div>
            <h2>12345</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card"  style="background-color:#63dada">
          <div slot="header" class="clearfix">
            <span>会员总数</span>
          </div>
          <div>
            <h2>123</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card"  style="background-color:#e8d6b6">
          <div slot="header" class="clearfix">
            <span>文章总数</span>
          </div>
          <div>
            <h2>8888</h2>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card"  style="background-color:#bbe8b6">
          <div slot="header" class="clearfix">
            <span>口碑数量</span>
          </div>
          <div>
            <h2>7777</h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="18">
        <el-card class="box-card">
          <div>
            <!-- echarts容器 -->
            <div id="main" style="width:100%;height:500px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>推荐文章</span>
          </div>
          <div>
            <ul class="list">
              <li v-for="(item,index) in articList" :key="index">{{item.title}}</li>
            </ul>
          </div>
        </el-card>

        <el-card style="margin-top:20px">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div>
            <el-descriptions class="margin-top" title="" :column="1" :size="size" border>
  
              <el-descriptions-item>
                <template slot="label">
                  系统名称
                </template>
                中博口碑管理系统
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  作者
                </template>
                KW39
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  手机
                </template>
                13999000099
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  版本
                </template>
                <el-tag size="small">1.0</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  联系地址
                </template>
                南京市雨花台区小行路16号
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引用echarts
import * as echarts from "echarts";
import request from '@/api/home';
export default {
  data() {
    return {
      size: 'mini',
      articList: []
    }
  },
  created(){
    request.getArticleList({curr:1, limit: 6}).then( r => {
      console.log(r.data);
      this.articList = r.data.listData;
    })
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "口碑来源统计",
      },
      tooltip: {},
      xAxis: {
        data: ["毕业生", "朋友", "网络", "同事"],
        boundaryGap: false,
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          smooth: true,
          data: [5, 20, 36, 10],
        },
      ],
    });
  },
};
</script>

<style scoped>
.box-card {
  text-align: center;
}
.list {
  list-style: none;
}
.list li {
  line-height: 26px;
}
</style>